<template>
  <div class="container">
    <div class="main">
      <!-- 头部搜索 -->
      <div class="top">
        <div class="left">
          <el-input
            class="input"
            v-model="searchValue"
            placeholder="请输入学科名称查询"
            clearable
            @clear="clear"
          />
          <el-button size="mini" class="button" @click="clear">清除</el-button>
          <el-button type="primary" size="mini" class="button" @click="search">搜索</el-button>
        </div>
        <div class="right">
          <el-button size="mini" icon="el-icon-edit" type="success" @click="add">新增学科</el-button>
        </div>
      </div>
      <!-- 中间 -->
      <div class="data">
        <i class="el-icon-info" />
        数据一共 {{total}} 条
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="100"></el-table-column>
          <el-table-column prop="username" label="创建者" width="100"></el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="200">
            <template slot-scope="scope">{{scope.row.addDate|parseTimeByString}}</template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" label="前台是否显示" width="150" :formatter="fn"></el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录" width="150"></el-table-column>
          <el-table-column prop="tags" label="标签" width="150"></el-table-column>
          <el-table-column prop="totals" label="题目数量" width="150"></el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`directorys?id=${scope.row.id}&name=${scope.row.subjectName}`)"
              >学科分类</el-button>
              <el-button
                type="text"
                size="small"
                @click="$router.push(`tags?id=${scope.row.id}&name=${scope.row.subjectName}`)"
              >学科标签</el-button>
              <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-sizes="[5,10]"
            :page-size="pagesize"
            layout="sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <subjectAdd ref="subjectAdd" @refrsh="getsubjectList"></subjectAdd>
      <subjectEdit ref="subjectEdit" @refrsh="getsubjectList"></subjectEdit>
    </div>
  </div>
</template>

<script>

import { list, remove } from '../../api/hmmm/subjects'
import subjectAdd from './component/subjectAdd.vue'
import subjectEdit from './component/subjectEdit.vue'
export default {
  data () {
    return {
      searchValue: '',
      page: 1,
      pagesize: 10,
      total: 0,
      tableData: []

    }
  },

  created () {
    this.getsubjectList()
  },

  methods: {
    async getsubjectList () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.searchValue
      })
      // 如果没有数据  并且 当前的页数大于1
      if (data.items.length === 0 && this.page > 1) {
        this.page--
        this.randoms()
        return
      }
      this.total = data.counts
      this.tableData = data.items
    },
    fn (row, column, cellValue, index) {
      return cellValue === 1 ? '是' : '否'
    },
    handleCurrentChange (val) {
      this.page = val
      this.getsubjectList()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.getsubjectList()
    },
    search () {
      if (this.searchValue === '') { this.$message('请输入编号后查询') }
      this.page = 1
      this.getsubjectList()
    },
    clear () {
      this.searchValue = ''
      this.getsubjectList()
    },
    add () {
      this.$refs.subjectAdd.dialogVisible = true
    },
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await remove(row)
        if (data.data.success) {
          this.$message.success('删除成功')
          this.$refs.subjectAdd.dialogVisible = false
          this.getsubjectList()
        } else {
          this.$message.error(data.data.error)
        }
      })
    },
    edit (row) {
      this.$refs.subjectEdit.dialogVisible = true
      this.$refs.subjectEdit.simple(row)
    }

  },
  components: {
    subjectAdd, subjectEdit
  }

}

</script>

<style scoped>
.input {
  margin-right: 10px;
}
.button {
  height: 35px;
}
.left {
  display: flex;
  justify-content: space-between;
  width: 400px;
}
.container {
  padding: 20px;
}
.main {
  background-color: #fff;
  width: 100%;
  padding: 20px;
  height: 100vh;
}
.search {
  width: 250px;
}
.top {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.data {
  background-color: #f4f4f5;
  height: 25px;
  line-height: 25px;
  padding-left: 5px;
  color: #909399;
  font-size: 14px;
}
.footer {
  padding: 20px;
  float: right;
}
</style>
